Micron Document
<!DOCTYPE html>
<html class="client-nojs vector-feature-night-mode-disabled vector-feature-language-in-header-enabled vector-feature-language-in-main-page-header-disabled vector-feature-page-tools-pinned-disabled vector-feature-toc-pinned-clientpref-1 vector-feature-main-menu-pinned-disabled vector-feature-limited-width-clientpref-1 vector-feature-limited-width-content-enabled vector-feature-custom-font-size-clientpref-1 vector-feature-appearance-pinned-clientpref-1 vector-sticky-header-enabled" lang="en" dir="ltr"><head>
<meta charset="UTF-8">
<title>Raphaël (JavaScript library)</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="canonical" href="https://en.wikipedia.org/wiki/Rapha%C3%ABl_(JavaScript_library)"> <link href="./mw/ext.cite.styles.css" rel="stylesheet" type="text/css">
<link href="./mw/ext.pygments.css" rel="stylesheet" type="text/css">
<link href="./mw/skins.vector.icons.css" rel="stylesheet" type="text/css">
<link href="./mw/skins.vector.search.codex.styles.css" rel="stylesheet" type="text/css">
<link href="./mw/skins.vector.styles.css" rel="stylesheet" type="text/css">
<link href="./mw/user.styles.css" rel="stylesheet" type="text/css">
<meta name="ResourceLoaderDynamicStyles" content="">
<link rel="stylesheet" type="text/css" href="./mw/site.styles.css">
<link rel="stylesheet" type="text/css" href="./mw/noscript.css">
<link rel="stylesheet" type="text/css" href="./footer.css">
<link rel="stylesheet" type="text/css" href="./vector-2022.css">
</head>
<body class="skin--responsive skin-vector skin-vector-search-vue mediawiki ltr sitedir-ltr mw-hide-empty-elt ns-0 ns-subject page-Raphaël_JavaScript_library rootpage-Raphaël_JavaScript_library skin-vector-2022 action-view">
<div class="mw-page-container">
<div class="mw-page-container-inner">
<div class="mw-content-container">
<main id="content" class="mw-body">
<header class="mw-body-header vector-page-titlebar">
<h1 id="firstHeading" class="firstHeading mw-first-heading">
<span id="openzim-page-title" class="mw-page-title-main"><span class="mw-page-title-main">Raphaël (JavaScript library)</span></span>
</h1>
</header>
<a id="top"></a>
<div id="bodyContent" class="vector-body ve-init-mw-desktopArticleTarget-targetContainer" aria-labelledby="firstHeading" data-mw-ve-target-container="">
<div id="mw-content-text" class="mw-body-content mw-content-ltr" lang="en" dir="ltr"><div class="mw-content-ltr mw-parser-output" lang="en" dir="ltr">
<style data-mw-deduplicate="TemplateStyles:r1295905060">
/* start https://en.wikipedia.org/ */


.mw-parser-output .infobox-subbox{padding:0;border:none;margin:-3px;width:auto;min-width:100%;font-size:100%;clear:none;float:none;background-color:transparent}.mw-parser-output .infobox-3cols-child{margin:auto}.mw-parser-output .infobox .navbar{font-size:100%}@media screen{html.skin-theme-clientpref-night .mw-parser-output .infobox-full-data:not(.notheme)>div:not(.notheme)[style]{background:#1f1f23!important;color:#f8f9fa}}@media screen and (prefers-color-scheme:dark){html.skin-theme-clientpref-os .mw-parser-output .infobox-full-data:not(.notheme)>div:not(.notheme)[style]{background:#1f1f23!important;color:#f8f9fa}}@media(min-width:640px){body.skin--responsive .mw-parser-output .infobox-table{display:table!important}body.skin--responsive .mw-parser-output .infobox-table>caption{display:table-caption!important}body.skin--responsive .mw-parser-output .infobox-table>tbody{display:table-row-group}body.skin--responsive .mw-parser-output .infobox-table th,body.skin--responsive .mw-parser-output .infobox-table td{padding-left:inherit;padding-right:inherit}}


/* end https://en.wikipedia.org/ */
</style><table class="infobox vevent"><tbody><tr><th colspan="2" class="infobox-above summary">Raphaël</th></tr><tr><td colspan="2" class="infobox-image logo"><span typeof="mw:File"></span></td></tr><tr><th scope="row" class="infobox-label" style="white-space: nowrap;"><a href="Programmer" title="Programmer">Developer(s)</a></th><td class="infobox-data">Dmitry Baranovskiy</td></tr><tr><th scope="row" class="infobox-label" style="white-space: nowrap;">Initial release</th><td class="infobox-data">August&nbsp;8, 2008<span style="display:none">&nbsp;(<span class="bday dtstart published updated">2008-08-08</span>)</span><sup id="cite_ref-1" class="reference"><a href="#cite_note-1"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a></sup></td></tr><tr style="display: none;"><td colspan="2" class="infobox-full-data"></td></tr><tr><th scope="row" class="infobox-label" style="white-space: nowrap;"><a href="Software_release_life_cycle" title="Software release life cycle">Stable release</a></th><td class="infobox-data"><div style="margin:0px;">2.3.0
/ August&nbsp;14, 2019<span style="display:none">&nbsp;(<span class="bday dtstart published updated">2019-08-14</span>)</span><sup id="cite_ref-2" class="reference"><a href="#cite_note-2"><span class="cite-bracket">[</span>2<span class="cite-bracket">]</span></a></sup></div></td></tr><tr style="display:none"><td colspan="2">
</td></tr><tr><th scope="row" class="infobox-label" style="white-space: nowrap;"><a href="Repository_(version_control)" title="Repository (version control)">Repository</a></th><td class="infobox-data"><style data-mw-deduplicate="TemplateStyles:r1126788409">
/* start https://en.wikipedia.org/ */


.mw-parser-output .plainlist ol,.mw-parser-output .plainlist ul{line-height:inherit;list-style:none;margin:0;padding:0}.mw-parser-output .plainlist ol li,.mw-parser-output .plainlist ul li{margin-bottom:0}


/* end https://en.wikipedia.org/ */
</style><div class="plainlist"><ul><li><span class="url"><a rel="nofollow" class="external text" href="https://github.com/DmitryBaranovskiy/raphael">github<wbr>.com<wbr>/DmitryBaranovskiy<wbr>/raphael</a></span> </li></ul>
</div></td></tr><tr><th scope="row" class="infobox-label" style="white-space: nowrap;">Written in</th><td class="infobox-data"><a href="JavaScript" title="JavaScript">JavaScript</a></td></tr><tr><th scope="row" class="infobox-label" style="white-space: nowrap;"><a href="Software_license" title="Software license">License</a></th><td class="infobox-data"><a href="MIT_License" title="MIT License">MIT License</a></td></tr><tr><th scope="row" class="infobox-label" style="white-space: nowrap;">Website</th><td class="infobox-data"><span class="url"><a rel="nofollow" class="external text" href="https://dmitrybaranovskiy.github.io/raphael/">dmitrybaranovskiy<wbr>.github<wbr>.io<wbr>/raphael<wbr>/</a></span></td></tr></tbody></table>
<p><b>Raphaël</b>, named for Italian painter <a href="Raffaello_Sanzio_da_Urbino" class="mw-redirect" title="Raffaello Sanzio da Urbino">Raffaello Sanzio da Urbino</a>,<sup id="cite_ref-3" class="reference"><a href="#cite_note-3"><span class="cite-bracket">[</span>3<span class="cite-bracket">]</span></a></sup> is a <a href="Cross-browser" class="mw-redirect" title="Cross-browser">cross-browser</a> <a href="JavaScript" title="JavaScript">JavaScript</a> library that draws <a href="Vector_graphics" title="Vector graphics">Vector graphics</a> for web sites. It will use <a href="Scalable_Vector_Graphics" class="mw-redirect" title="Scalable Vector Graphics">SVG</a> for most browsers, but will use <a href="Vector_Markup_Language" title="Vector Markup Language">VML</a> for older versions of <a href="Internet_Explorer" title="Internet Explorer">Internet Explorer</a>. Raphaël currently supports <a href="Chrome_browser" class="mw-redirect" title="Chrome browser">Chrome</a> 5.0+ <a href="Firefox" title="Firefox">Firefox</a> 3.0+, <a href="Safari_(web_browser)" title="Safari (web browser)">Safari</a> 3.0+, <a href="Opera_(web_browser)" title="Opera (web browser)">Opera</a> 9.5+ and <a href="Internet_Explorer" title="Internet Explorer">Internet Explorer</a> 6.0+.
</p>
<meta property="mw:PageProp/toc">
<div class="mw-heading mw-heading2"><h2 id="Use">Use</h2></div>
<p>Raphaël is used by first creating an instance of the Raphaël <a href="Object_(computer_science)" title="Object (computer science)">object</a>, which manages the creation of the canvas. The following examples create a canvas that is 320 pixels wide and 200 pixels high:
</p>
<div class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr"><pre><span class="c1">// top left of canvas at the viewport's 10,50 coordinate</span>
<span class="kd">var</span><span class="w"> </span><span class="nx">r</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">Raphael</span><span class="p">(</span><span class="mf">10</span><span class="p">,</span><span class="w"> </span><span class="mf">50</span><span class="p">,</span><span class="w"> </span><span class="mf">320</span><span class="p">,</span><span class="w"> </span><span class="mf">200</span><span class="p">);</span>

<span class="c1">// top left of canvas at the top left corner of the #example element (in elements where dir="ltr")</span>
<span class="kd">var</span><span class="w"> </span><span class="nx">r</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">Raphael</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"example"</span><span class="p">),</span><span class="w"> </span><span class="mf">320</span><span class="p">,</span><span class="w"> </span><span class="mf">200</span><span class="p">);</span>

<span class="c1">// same as above</span>
<span class="kd">var</span><span class="w"> </span><span class="nx">r</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">Raphael</span><span class="p">(</span><span class="s2">"example"</span><span class="p">,</span><span class="w"> </span><span class="mf">320</span><span class="p">,</span><span class="w"> </span><span class="mf">200</span><span class="p">);</span>
</pre></div>
<p>Once the Raphaël object has been instantiated, its various drawing, resizing and animation methods may be called to build up a vector graphic. This library includes support of Cùfon fonts, a format that turns a given font into a set of vector paths. It is extensible through plugins.
</p>
<div class="mw-heading mw-heading2"><h2 id="Usage">Usage</h2></div>
<p>The widget is used on the <a href="Washington_Post" class="mw-redirect" title="Washington Post">Washington Post</a> and the <a href="The_Times" title="The Times">Times Online</a> websites.
</p><p>Raphaël is also used by <a href="ICloud" title="ICloud">iCloud</a>.com, and by <a href="Mass_Relevance" class="mw-redirect" title="Mass Relevance">Mass Relevance</a> in the <a href="White_House" title="White House">White House</a>.<sup id="cite_ref-4" class="reference"><a href="#cite_note-4"><span class="cite-bracket">[</span>4<span class="cite-bracket">]</span></a></sup>
</p>
<div class="mw-heading mw-heading2"><h2 id="See_also">See also</h2></div>
<style data-mw-deduplicate="TemplateStyles:r1266661725">
/* start https://en.wikipedia.org/ */


.mw-parser-output .portalbox{padding:0;margin:0.5em 0;display:table;box-sizing:border-box;max-width:175px;list-style:none}.mw-parser-output .portalborder{border:1px solid var(--border-color-base,#a2a9b1);padding:0.1em;background:var(--background-color-neutral-subtle,#f8f9fa)}.mw-parser-output .portalbox-entry{display:table-row;font-size:85%;line-height:110%;height:1.9em;font-style:italic;font-weight:bold}.mw-parser-output .portalbox-image{display:table-cell;padding:0.2em;vertical-align:middle;text-align:center}.mw-parser-output .portalbox-link{display:table-cell;padding:0.2em 0.2em 0.2em 0.3em;vertical-align:middle}@media(min-width:720px){.mw-parser-output .portalleft{margin:0.5em 1em 0.5em 0}.mw-parser-output .portalright{clear:right;float:right;margin:0.5em 0 0.5em 1em}}


/* end https://en.wikipedia.org/ */
</style>
<ul><li><a href="D3.js" title="D3.js">D3.js</a></li></ul>
<div class="mw-heading mw-heading2"><h2 id="References">References</h2></div>
<style data-mw-deduplicate="TemplateStyles:r1239543626">
/* start https://en.wikipedia.org/ */


.mw-parser-output .reflist{margin-bottom:0.5em;list-style-type:decimal}@media screen{.mw-parser-output .reflist{font-size:90%}}.mw-parser-output .reflist .references{font-size:100%;margin-bottom:0;list-style-type:inherit}.mw-parser-output .reflist-columns-2{column-width:30em}.mw-parser-output .reflist-columns-3{column-width:25em}.mw-parser-output .reflist-columns{margin-top:0.3em}.mw-parser-output .reflist-columns ol{margin-top:0}.mw-parser-output .reflist-columns li{page-break-inside:avoid;break-inside:avoid-column}.mw-parser-output .reflist-upper-alpha{list-style-type:upper-alpha}.mw-parser-output .reflist-upper-roman{list-style-type:upper-roman}.mw-parser-output .reflist-lower-alpha{list-style-type:lower-alpha}.mw-parser-output .reflist-lower-greek{list-style-type:lower-greek}.mw-parser-output .reflist-lower-roman{list-style-type:lower-roman}


/* end https://en.wikipedia.org/ */
</style><div class="reflist">
<div class="mw-references-wrap"><ol class="references">
<li id="cite_note-1"><span class="mw-cite-backlink"><b><a href="#cite_ref-1">^</a></b></span> <span class="reference-text"><style data-mw-deduplicate="TemplateStyles:r1238218222">
/* start https://en.wikipedia.org/ */


.mw-parser-output cite.citation{font-style:inherit;word-wrap:break-word}.mw-parser-output .citation q{quotes:"\"""\"""'""'"}.mw-parser-output .citation:target{background-color:rgba(0,127,255,0.133)}.mw-parser-output .id-lock-free.id-lock-free a{background:url("./mw/Lock-green.svg")right 0.1em center/9px no-repeat}.mw-parser-output .id-lock-limited.id-lock-limited a,.mw-parser-output .id-lock-registration.id-lock-registration a{background:url("./mw/Lock-gray-alt-2.svg")right 0.1em center/9px no-repeat}.mw-parser-output .id-lock-subscription.id-lock-subscription a{background:url("./mw/Lock-red-alt-2.svg")right 0.1em center/9px no-repeat}.mw-parser-output .cs1-ws-icon a{background:url("./mw/Wikisource-logo.svg")right 0.1em center/12px no-repeat}body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-free a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-limited a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-registration a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-subscription a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .cs1-ws-icon a{background-size:contain;padding:0 1em 0 0}.mw-parser-output .cs1-code{color:inherit;background:inherit;border:none;padding:inherit}.mw-parser-output .cs1-hidden-error{display:none;color:var(--color-error,#d33)}.mw-parser-output .cs1-visible-error{color:var(--color-error,#d33)}.mw-parser-output .cs1-maint{display:none;color:#085;margin-left:0.3em}.mw-parser-output .cs1-kern-left{padding-left:0.2em}.mw-parser-output .cs1-kern-right{padding-right:0.2em}.mw-parser-output .citation .mw-selflink{font-weight:inherit}@media screen{.mw-parser-output .cs1-format{font-size:95%}html.skin-theme-clientpref-night .mw-parser-output .cs1-maint{color:#18911f}}@media screen and (prefers-color-scheme:dark){html.skin-theme-clientpref-os .mw-parser-output .cs1-maint{color:#18911f}}


/* end https://en.wikipedia.org/ */
</style><cite class="citation web cs1"><a rel="nofollow" class="external text" href="http://dmitry.baranovskiy.com/post/raphael-javascript-library">"Raphaël—JavaScript library"</a>.</cite></span>
</li>
<li id="cite_note-2"><span class="mw-cite-backlink"><b><a href="#cite_ref-2">^</a></b></span> <span class="reference-text"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://github.com/DmitryBaranovskiy/raphael/releases">"Releases · DmitryBaranovskiy/raphael"</a>. <i><a href="GitHub" title="GitHub">GitHub</a></i><span class="reference-accessdate">. Retrieved <span class="nowrap">2021-03-10</span></span>.</cite></span>
</li>
<li id="cite_note-3"><span class="mw-cite-backlink"><b><a href="#cite_ref-3">^</a></b></span> <span class="reference-text"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="http://raphaeljs.com/">"An Intro to Raphaël"</a>.</cite></span>
</li>
<li id="cite_note-4"><span class="mw-cite-backlink"><b><a href="#cite_ref-4">^</a></b></span> <span class="reference-text"><a rel="nofollow" class="external text" href="https://twitter.com/RaphaelJS/status/88762625986531329">Raphaël in White House: “we (@massrelevance) used @raphaeljs 2.0 for the map viz used during the #AskObama event today http://t.co/EcqROIi”</a></span>
</li>
</ol></div></div>
<div class="mw-heading mw-heading2"><h2 id="Further_reading">Further reading</h2></div>
<ul><li><cite id="CITEREFWilson2013" class="citation book cs1">Wilson, Chris (December 2013). <i>RaphaelJS</i>. <a href="O'Reilly_Media" title="O'Reilly Media">O'Reilly Media</a>. <a href="ISBN_(identifier)" class="mw-redirect" title="ISBN (identifier)">ISBN</a>&nbsp;<bdi>978-1-4493-6536-3</bdi>.</cite></li></ul>
<div class="mw-heading mw-heading2"><h2 id="External_links">External links</h2></div>
<ul><li><a rel="nofollow" class="external text" href="https://dmitrybaranovskiy.github.io/raphael/">Raphaël</a> homepage</li>
<li><a rel="nofollow" class="external text" href="https://dmitrybaranovskiy.github.io/raphael/reference.html">Raphaël</a> syntax</li>
<li><a rel="nofollow" class="external text" href="http://dev.opera.com/articles/view/raphael-a-javascript-api-for-svg/">Raphaël:</a> a JavaScript API for SVG</li>
<li><a rel="nofollow" class="external text" href="http://net.tutsplus.com/tutorials/javascript-ajax/an-introduction-to-the-raphael-js-library/">An introduction to Raphaël</a></li>
<li><a rel="nofollow" class="external text" href="http://www.fosslc.org/drupal/content/raphaeljs-javascript-vector-graphics-library-web/">Raphael.js:</a> <a rel="nofollow" class="external text" href="https://web.archive.org/web/20110929222020/http://www.fosslc.org/drupal/content/raphaeljs-javascript-vector-graphics-library-web">Archived</a> 2011-09-29 at the <a href="Wayback_Machine" title="Wayback Machine">Wayback Machine</a> javascript vector graphics library for the web</li></ul></div><!--htdig_noindex--><div><div class="zim-footer">
This article is issued from <a class="external text" title="Last edited on 2025-08-08" href="https://en.wikipedia.org/wiki/?title=Rapha%C3%ABl_(JavaScript_library)&amp;oldid=1304769741">Wikipedia</a>. The text is available under <a class="external text" href="https://creativecommons.org/licenses/by-sa/4.0/deed.en">Creative Commons Attribution-Share Alike 4.0</a> unless otherwise noted. Additional terms may apply for the media files.
</div>
</div><!--/htdig_noindex--></div>
</div>
</main>
</div>
</div>
</div>

</body></html>